/**
 * @page: 快递配置页面
 * @author:Elvis 
 */
import { useState, useEffect, useMemo } from 'react';
import ExpressList from './component/ExpressList';
import FormRender from '@/components/FormRender';
import { useResize } from '@/hooks/useResize';
import { getFormItem } from './config.js';
import { queryExpressCompanyList, queryWareHouseList } from './service';

const ExpressConfig = () => {

  const [query, setQuery] = useState({});

  const [tableKey, setTableKey] = useState(1);

  //快递公司下拉列表
  const [companyList, setCompanyList] = useState([]);

  //仓库下拉列表
  const [houseList, setHouseList] = useState([]);

  //监听变更
  const { el: headerEl, height: headerHeight } = useResize();

  //获取仓库下拉列表
  const getWareHouseList = async () => {
    const { success, data } = await queryWareHouseList();
    if (success) {
      const arr = [];
      data.map(v => {
        arr.push({
          label: v.warehouseName,
          value: v.id
        })
      })
      setHouseList(arr);
    }
  }

  //获取快递公司下拉列表
  const getExpressList = async () => {
    const { success, data } = await queryExpressCompanyList();
    if (success) {
      const arr = [];
      data.map(v => {
        arr.push({
          label: v.name,
          value: v.id
        })
      })
      setCompanyList(arr);
    }
  }

  //初始化数据请求
  useEffect(() => {
    getWareHouseList();
    getExpressList();
  }, [])

  //表单数据
  const formArr = useMemo(() => {
    return getFormItem({
      expressId: companyList,
      warehouseId: houseList
    });
  }, [companyList, houseList])

  //表单渲染组件
  const FormRenderProps = {
    query,
    formArr,
    formConfig: {
      name: 'express-config-form',
      style: { marginBottom: '16px' }
    },
    clickSearch(val) {
      setQuery(val);
      setTableKey(tableKey + 1);
    },
    clickReset() {
      setQuery({});
      setTableKey(tableKey + 1);
    },
  }

  //列表数据
  const ExpressListProps = {
    query,
    tableKey,
  }



  return (
    <>
      <div ref={headerEl}>
        <FormRender {...FormRenderProps} />
      </div>
      <div className="global-page-wrap" style={{ height: `calc(100vh - ${headerHeight + 116}px)`}}>
        <ExpressList {...ExpressListProps} />
      </div>
    </>
  )
}

export default ExpressConfig;
